﻿import React, { useState, useEffect } from 'react';
import { Row, Col, Button, message, Form, Input } from 'antd';
import { getUserInfo } from '@/utils/storage';
import {
  editPolicyCompanyUser,
  getPolicyCompanyUserById,
} from '@/services/PersonalCenter/modifyInfo';
import styles from './index.less';

const ModifyInfo: React.FC = () => {
  const [editType, setEditType] = useState('read');
  const [companyInfo, setCompanyInfo] = useState([]);
  const userInfo = getUserInfo();
  const [form] = Form.useForm();

  useEffect(() => {
    setEditType('read');
  }, []);

  useEffect(() => {
    getPolicyCompanyUserById({ id: userInfo.userId })
      .then((resp) => {
        setCompanyInfo(resp?.results);
      })
      .catch((error) => {
        throw error;
      });
  }, [editType]);

  const handleEdit = () => {
    setEditType('edit');
  };
  const handleSubmit = async () => {
    const values = await form.validateFields();
    const { companyAddress, userName, phone, email } = values;
    try {
      const { errorCode } = await editPolicyCompanyUser({
        id: userInfo.userId,
        companyAddress,
        userName,
        phone,
        email,
      });
      if (errorCode === 0) {
        // form.resetFields();
        setEditType('read');
        message.success('保存成功！');
      }
    } catch (e) {
      message.error('保存失败,请联系管理员');
    }
  };

  return (
    <div className={styles.modifyInfoWrapper}>
      <div className={styles.modifyInfoTitle}>
        <div className={styles.titleContent}>
          <div className={styles.sideShortBar}></div>
          <div className={styles.titleText}>修改信息</div>
        </div>
      </div>
      <div className={styles.modifyInfoContent}>
        <Form form={form}>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              企业名称：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>{companyInfo?.companyName}</span>
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              用户名：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>{companyInfo?.userAccount}</span>
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              企业地址：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              {editType === 'read' && (
                <span className={styles.textContent}>{companyInfo?.companyAddress}</span>
              )}
              {editType === 'edit' && (
                <Form.Item
                  initialValue={companyInfo?.companyAddress}
                  name="companyAddress"
                  rules={[{ required: true, message: '企业详细地址不能为空' }]}
                >
                  <Input placeholder="请输入企业详细地址" />
                </Form.Item>
              )}
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              统一社会信用代码：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>
                {companyInfo?.unifiedSocialCreditCode
                  ? companyInfo?.unifiedSocialCreditCode
                  : '暂无'}
              </span>
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              归属园区：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>{companyInfo?.orgName}</span>
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              联系人姓名：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              {editType === 'read' && (
                <span className={styles.textContent}>{companyInfo?.userName}</span>
              )}
              {editType === 'edit' && (
                <Form.Item
                  initialValue={companyInfo?.userName}
                  name="userName"
                  rules={[{ required: true, message: '联系人姓名不能为空' }]}
                >
                  <Input placeholder="请输入联系人姓名" />
                </Form.Item>
              )}
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              联系方式：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              {editType === 'read' && (
                <span className={styles.textContent}>{companyInfo?.phone}</span>
              )}
              {editType === 'edit' && (
                <Form.Item
                  initialValue={companyInfo?.phone}
                  name="phone"
                  rules={[
                    {
                      required: true,
                      message: '联系方式不能为空',
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: '手机号格式错误！',
                    },
                  ]}
                >
                  <Input placeholder="请输入联系方式" />
                </Form.Item>
              )}
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              邮箱：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              {editType === 'read' && (
                <span className={styles.textContent}>{companyInfo?.email}</span>
              )}
              {editType === 'edit' && (
                <Form.Item
                  initialValue={companyInfo?.email}
                  name="email"
                  rules={[
                    {
                      pattern:
                        /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
                      message: '邮箱格式错误',
                    },
                  ]}
                >
                  <Input placeholder="请输入邮箱" />
                </Form.Item>
              )}
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}></Col>
            <Col className={styles.button} span={16}>
              {editType === 'edit' && (
                <Button type="primary" onClick={handleSubmit}>
                  保存
                </Button>
              )}
              {editType === 'read' && (
                <Button type="primary" onClick={handleEdit}>
                  修改
                </Button>
              )}
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};

export default ModifyInfo;
